<template>
  <div class="">
    <sec-table
      style="margin-bottom: 20px"
      :tableData="apiAnaSamples.tableData"
      :tableCol="apiAnaSamples.tableCol"
      expand
    >
      <template v-slot:expand="{ data }">
        <sec-table
          border
          style="margin: 0 20px"
          :tableData="data.row.associatedCategory"
          :tableCol="data.row.associatedCategoryCol ? data.row.associatedCategoryCol : apiAnaSamples.expandTableCol"
        ></sec-table>
      </template>
    </sec-table>
    <el-drawer title="详情" :visible.sync="drawer" size="50%" append-to-body>
      <el-collapse v-model="collapseVal" style="margin: 0 20px">
        <el-collapse-item title="User_Agent" name="userAgent">
          <el-input
            class="https-textarea"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }"
            :rows="2"
            placeholder="请输入"
            v-model="userAgent"
          >
          </el-input>
        </el-collapse-item>
        <el-collapse-item title="请求样本" name="reqExample">
          <el-collapse v-model="activeNames" style="margin: 0 20px">
            <el-collapse-item v-for="(item, index) in collapseCol" :key="index" :title="item.title" :name="item.name">
              <el-input
                class="https-textarea"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 10 }"
                :rows="2"
                placeholder="请输入"
                v-model="collapseColData[item.name]"
              >
              </el-input>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "secApiAnaSamples",
  props: {
    source: String,
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    columns: {
      type: Array,
      default: () => {
        return [
          { label: "参数", prop: "parameter" },
          { label: "参数位置", prop: "parameterType" },
        ];
      },
    },
  },
  components: {},
  data() {
    return {
      //查看抽屉展示的内容需要的数据
      activeNames: [],
      collapseVal: ["userAgent", "reqExample"],
      collapseColData: {},
      userAgent: [],
      collapseCol: [
        { title: "URL", name: "query" },
        { title: "请求头", name: "requestHeader" },
        { title: "请求体", name: "requestBody" },
        { title: "响应头", name: "responseHeader" },
        { title: "响应体", name: "responseBody" },
        // { title: "cookie", name: "cookie" },
      ],
      drawer: false,
      //api识别样例
      apiAnaSamples: {
        expandTableCol: [
          { label: "敏感类型", prop: "category" },
          { label: "样本", prop: "keywords" },
        ],
        tableData: [],
        tableCol: [],
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {},
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(newVal) {
        console.log("[特殊的识别样例 newVal ] >", newVal);
        this.apiAnaSamples.tableData = newVal;
        let optCol = ["databaseAudit"].includes(this.source)
          ? {}
          : {
              type: "operation",
              label: "详情",
              children: [
                {
                  label: "查看",
                  click: ({ row }) => {
                    console.log(row);
                    this.activeNames = [];
                    this.collapseColData = row.sample;
                    console.log(row);
                    this.userAgent = row.userAgent;
                    for (let key in row.sample) {
                      this.activeNames.push(key);
                    }
                    this.drawer = true;
                  },
                },
              ],
            };
        this.apiAnaSamples.tableCol = [...this.columns, optCol];
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
